Ext.define('Era.view.EventScreen',{
    extend: 'Ext.form.Panel',
    alias: 'widget.eventscreen',
    layout: 'vbox',
    heuight: 500,

    initComponent: function() {    
        
        var record = this.record;
        
        this.items = [
            {
                xtype: 'container',
                style: {
                    margin: '5px 15px 15px 15px'
                },
                width: 400,
                layout: 'hbox',
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Title',
                        labelAlign: 'top',
                        name: 'title',
                        width: 250,
                        style: {
                            marginRight: '100px'
                        }
                    },  
                    {
                        xtype: 'iconfield',
                        name: 'icon',
                        listeners: {
                            click: function() {
                                Era.controller.Main.showIconWindow();
                            }
                        }
                    }
                ]
            },
            {
                xtype: 'textarea',
                style: {
                    margin: '0px 15px 15px 15px'
                },
                fieldLabel: 'Description',
                labelAlign: 'top',
                name: 'description',
                width: 250,
                height: 100
            },
            {
                xtype: 'container',
                layout: 'fit',
                style: {
                    margin: '0px 0px 10px 15px'
                },
                items: [
                    {
                        style: {
                            margin: '0px 0px 0px 0px'
                        },
                        xtype: 'checkboxfield',
                        fieldLabel: 'Hight Prioirty',
                        labelAlign: 'left',
                        name: 'priority'
                    }
                ]
            },
            {
                xtype: 'container',
                width: 250,
                style: {
                    margin: '0px 15px 15px 15px'
                },
                layout: 'hbox',
                items: [
                    {
                        xtype: 'datefield',
                        fieldLabel: 'Start',
                        labelAlign: 'top',
                        name: 'start_date',
                        style: {
                            margin: '0px 45px 0px 0px'
                        },
                        format: 'm-d-Y',
                        width: 100
                    },
                    {
                        xtype: 'datefield',
                        fieldLabel: 'End',
                        labelAlign: 'top',
                        name: 'end_date',
                        format: 'm-d-Y',
                        width: 100
                    },
                ]  
            }
        ];
    
        this.buttons = [
            {
                text: 'Submit',
                handler: function() {

                    // get store
                    var store = Era.controller.Main.getStore('events');

                    // update the record
                    this.findParentByType('eventscreen').getForm().updateRecord(record);

                    // add to database
                    if (record.phantom == false) {
                        store.update(record);
                    } else {
                        store.add(record);
                    }

                    // create a grid with all events
                    var screen = Ext.create('Era.view.ManageScreen',{store: store});

                    // load grid in the menu panel
                    Era.controller.Main.showMenuScreen(screen);

                }
            },
            {
                text: 'Cancel',
                handler: function() {

                    // create a grid with all events
                    var screen = Ext.create('Era.view.ManageScreen',{store: Era.controller.Main.getStore('events')});

                    // load grid in the menu panel
                    Era.controller.Main.showMenuScreen(screen);
                }
            }
        ];
        
        this.callParent(this);
        this.loadRecord(this.record);
    }
    
});